<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>在线签字工具</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
        }
        
        body {
            background-color: #f5f7fa;
            padding: 20px;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        
        .container {
            max-width: 800px;
            width: 100%;
        }
        
        header {
            text-align: center;
            margin-bottom: 30px;
            padding: 20px 0;
        }
        
        h1 {
            font-size: 2.2rem;
            color: #1e293b;
            margin-bottom: 8px;
        }
        
        .subtitle {
            color: #64748b;
            font-size: 1.1rem;
        }
        
        .signature-container {
            background-color: white;
            border-radius: 12px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
            padding: 25px;
            margin-bottom: 30px;
        }
        
        .canvas-wrapper {
            position: relative;
            width: 100%;
            height: 300px;
            border: 2px dashed #cbd5e1;
            border-radius: 8px;
            background-color: #ffffff;
            margin-bottom: 25px;
            overflow: hidden;
            touch-action: none;
        }
        
        canvas {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            cursor: crosshair;
        }
        
        .placeholder {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #94a3b8;
            font-size: 1.2rem;
            pointer-events: none;
        }
        
        .controls {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
            justify-content: center;
        }
        
        .btn {
            padding: 12px 20px;
            border-radius: 8px;
            font-weight: 600;
            font-size: 1rem;
            cursor: pointer;
            transition: all 0.2s ease;
            border: none;
            min-width: 140px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
        }
        
        .btn-clear {
            background-color: #f8fafc;
            color: #334155;
            border: 1px solid #cbd5e1;
        }
        
        .btn-clear:hover {
            background-color: #f1f5f9;
        }
        
        .btn-copy {
            background-color: #0ea5e9;
            color: white;
        }
        
        .btn-copy:hover {
            background-color: #0284c7;
        }
        
        .btn-save {
            background-color: #10b981;
            color: white;
        }
        
        .btn-save:hover {
            background-color: #059669;
        }
        
        .btn:disabled {
            opacity: 0.6;
            cursor: not-allowed;
        }
        
        .instructions {
            background-color: #f8fafc;
            border-radius: 12px;
            padding: 20px;
            color: #334155;
            font-size: 1rem;
            line-height: 1.6;
        }
        
        .instructions h2 {
            margin-bottom: 15px;
            color: #1e293b;
        }
        
        .instructions ul {
            padding-left: 25px;
        }
        
        .instructions li {
            margin-bottom: 10px;
        }
        
        .signature-preview {
            margin-top: 20px;
            text-align: center;
            display: none;
        }
        
        .signature-preview img {
            max-width: 300px;
            border: 1px solid #e2e8f0;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
        }
        
        .signature-preview h3 {
            margin: 15px 0;
            color: #334155;
        }
        
        .status {
            padding: 10px;
            border-radius: 6px;
            text-align: center;
            margin-top: 15px;
            display: none;
        }
        
        .status-success {
            background-color: #dcfce7;
            color: #166534;
        }
        
        .status-error {
            background-color: #fee2e2;
            color: #b91c1c;
        }
        
        @media (max-width: 600px) {
            .canvas-wrapper {
                height: 250px;
            }
            
            .controls {
                flex-direction: column;
            }
            
            .btn {
                width: 100%;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <h1>在线签字工具</h1>
            <p class="subtitle">电脑和手机均可使用的电子签名解决方案</p>
        </header>
        
        <main>
            <div class="signature-container">
                <div class="canvas-wrapper">
                    <canvas id="signature-canvas"></canvas>
                    <div class="placeholder" id="placeholder">请在此处签名</div>
                </div>
                
                <div class="controls">
                    <button id="clear-btn" class="btn btn-clear">
                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <path d="M3 6h18"></path>
                            <path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"></path>
                            <path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"></path>
                        </svg>
                        清空签名
                    </button>
                    
                    <button id="copy-btn" class="btn btn-copy" disabled>
                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
                            <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
                        </svg>
                        复制签名
                    </button>
                    
                    <button id="save-btn" class="btn btn-save" disabled>
                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"></path>
                            <polyline points="17 21 17 13 7 13 7 21"></polyline>
                            <polyline points="7 3 7 8 15 8"></polyline>
                        </svg>
                        保存签名
                    </button>
                </div>
            </div>
            
            <div id="status" class="status"></div>
            
            <div class="instructions">
                <h2>使用说明</h2>
                <ul>
                    <li><strong>电脑端</strong>：使用鼠标在画布上按住并拖动进行签名</li>
                    <li><strong>手机/平板</strong>：用手指在画布上直接签名</li>
                    <li><strong>复制签名</strong>：签名后点击"复制签名"按钮，签名图片将复制到剪贴板</li>
                    <li><strong>保存签名</strong>：点击"保存签名"按钮可将签名保存为PNG图片</li>
                    <li><strong>清空签名</strong>：点击"清空签名"按钮可重新开始</li>
                </ul>
            </div>
        </main>
    </div>
    
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 获取DOM元素
            const canvas = document.getElementById('signature-canvas');
            const ctx = canvas.getContext('2d');
            const placeholder = document.getElementById('placeholder');
            const clearBtn = document.getElementById('clear-btn');
            const copyBtn = document.getElementById('copy-btn');
            const saveBtn = document.getElementById('save-btn');
            const statusEl = document.getElementById('status');
            
            // 初始化变量
            let isDrawing = false;
            let lastX = 0;
            let lastY = 0;
            let hasSignature = false;
            
            // 设置Canvas尺寸
            function resizeCanvas() {
                const container = canvas.parentElement;
                const rect = container.getBoundingClientRect();
                
                canvas.width = rect.width * 2;
                canvas.height = rect.height * 2;
                canvas.style.width = `${rect.width}px`;
                canvas.style.height = `${rect.height}px`;
                
                // 设置高清绘制
                ctx.scale(2, 2);
                ctx.lineWidth = 3;
                ctx.lineCap = 'round';
                ctx.lineJoin = 'round';
                ctx.strokeStyle = '#1e293b';
            }
            
            // 开始绘制
            function startDrawing(e) {
                isDrawing = true;
                [lastX, lastY] = getCoordinates(e);
            }
            
            // 绘制中
            function draw(e) {
                if (!isDrawing) return;
                
                const [x, y] = getCoordinates(e);
                
                ctx.beginPath();
                ctx.moveTo(lastX, lastY);
                ctx.lineTo(x, y);
                ctx.stroke();
                
                [lastX, lastY] = [x, y];
            }
            
            // 结束绘制
            function stopDrawing() {
                isDrawing = false;
                checkSignature();
            }
            
            // 获取坐标（兼容鼠标和触摸事件）
            function getCoordinates(e) {
                let clientX, clientY;
                
                if (e.type.includes('touch')) {
                    clientX = e.touches[0].clientX;
                    clientY = e.touches[0].clientY;
                } else {
                    clientX = e.clientX;
                    clientY = e.clientY;
                }
                
                const rect = canvas.getBoundingClientRect();
                return [
                    (clientX - rect.left) * (canvas.width / rect.width / 2),
                    (clientY - rect.top) * (canvas.height / rect.height / 2)
                ];
            }
            
            // 检查是否有签名
            function checkSignature() {
                const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
                const data = imageData.data;
                
                // 检查是否有非透明像素
                for (let i = 3; i < data.length; i += 4) {
                    if (data[i] > 0) {
                        hasSignature = true;
                        placeholder.style.display = 'none';
                        copyBtn.disabled = false;
                        saveBtn.disabled = false;
                        return;
                    }
                }
                
                hasSignature = false;
                placeholder.style.display = 'flex';
                copyBtn.disabled = true;
                saveBtn.disabled = true;
            }
            
            // 清空画布
            function clearCanvas() {
                ctx.clearRect(0, 0, canvas.width, canvas.height);
                hasSignature = false;
                placeholder.style.display = 'flex';
                copyBtn.disabled = true;
                saveBtn.disabled = true;
                hideStatus();
            }
            
            // 复制签名到剪贴板
            async function copySignature() {
                if (!hasSignature) return;
                
                try {
                    // 创建临时canvas确保图像质量
                    const tempCanvas = document.createElement('canvas');
                    tempCanvas.width = canvas.width;
                    tempCanvas.height = canvas.height;
                    const tempCtx = tempCanvas.getContext('2d');
                    
                    // 添加白色背景
                    tempCtx.fillStyle = 'white';
                    tempCtx.fillRect(0, 0, tempCanvas.width, tempCanvas.height);
                    tempCtx.drawImage(canvas, 0, 0);
                    
                    // 尝试使用现代API复制
                    tempCanvas.toBlob(async (blob) => {
                        try {
                            await navigator.clipboard.write([
                                new ClipboardItem({ [blob.type]: blob })
                            ]);
                            showStatus('签名已成功复制到剪贴板', true);
                        } catch (err) {
                            // 降级处理：提示用户手动保存
                            showStatus('复制失败：您的浏览器可能不支持此功能，请使用"保存签名"功能', false);
                        }
                    }, 'image/png');
                } catch (err) {
                    showStatus('复制失败：' + err.message, false);
                }
            }
            
            // 保存签名
            function saveSignature() {
                if (!hasSignature) return;
                
                try {
                    // 创建临时canvas确保图像质量
                    const tempCanvas = document.createElement('canvas');
                    tempCanvas.width = canvas.width;
                    tempCanvas.height = canvas.height;
                    const tempCtx = tempCanvas.getContext('2d');
                    
                    // 添加白色背景
                    tempCtx.fillStyle = 'white';
                    tempCtx.fillRect(0, 0, tempCanvas.width, tempCanvas.height);
                    tempCtx.drawImage(canvas, 0, 0);
                    
                    // 创建下载链接
                    const link = document.createElement('a');
                    link.download = `signature_${new Date().getTime()}.png`;
                    link.href = tempCanvas.toDataURL('image/png');
                    link.click();
                    
                    showStatus('签名已保存为PNG图片', true);
                } catch (err) {
                    showStatus('保存失败：' + err.message, false);
                }
            }
            
            // 显示状态信息
            function showStatus(message, isSuccess) {
                statusEl.textContent = message;
                statusEl.className = isSuccess ? 'status status-success' : 'status status-error';
                statusEl.style.display = 'block';
                
                setTimeout(hideStatus, 3000);
            }
            
            // 隐藏状态信息
            function hideStatus() {
                statusEl.style.display = 'none';
            }
            
            // 初始化Canvas
            resizeCanvas();
            window.addEventListener('resize', resizeCanvas);
            
            // 添加事件监听器
            canvas.addEventListener('mousedown', startDrawing);
            canvas.addEventListener('mousemove', draw);
            canvas.addEventListener('mouseup', stopDrawing);
            canvas.addEventListener('mouseout', stopDrawing);
            
            canvas.addEventListener('touchstart', (e) => {
                e.preventDefault();
                startDrawing(e);
            });
            canvas.addEventListener('touchmove', (e) => {
                e.preventDefault();
                draw(e);
            });
            canvas.addEventListener('touchend', (e) => {
                e.preventDefault();
                stopDrawing();
            });
            
            clearBtn.addEventListener('click', clearCanvas);
            copyBtn.addEventListener('click', copySignature);
            saveBtn.addEventListener('click', saveSignature);
        });
    </script>
</body>
</html>